<template>
	<div class="prescription-container">
		<!-- 顶部搜索区域 -->
		<div class="search-section">
			<el-card class="search-card">
				<div class="search-header">
					<h3>患者处方查询</h3>
					<el-button type="primary" @click="showPrescribeDialog" :disabled="!selectedPatient">
						开具新处方
					</el-button>
				</div>

				<div class="search-form">
					<el-input v-model="patientSearch" placeholder="请输入患者编号/身份证号" class="search-input"
						@keyup.enter="searchPatient">
						<template #append>
							<el-button type="primary" icon="el-icon-search" @click="searchPatient" :loading="searching">
								查询
							</el-button>
						</template>
					</el-input>
				</div>
			</el-card>
		</div>

		<!-- 患者信息展示 -->
		<div v-if="selectedPatient" class="patient-info-section">
			<el-card class="patient-card">
				<div class="patient-header">
					<div class="patient-basic">
						<div class="patient-name">{{ selectedPatient.patientName }}</div>
						<div class="patient-meta">
							<span class="meta-item">
								<i class="el-icon-user"></i>
								{{ selectedPatient.gender === '1' ? '男' : '女' }} | {{ selectedPatient.age }}岁
							</span>
							<span class="meta-item">
								<i class="el-icon-document"></i>
								患者编号: {{ selectedPatient.patientId }}
							</span>
							<span class="meta-item">
								<i class="el-icon-phone"></i>
								{{ selectedPatient.phone }}
							</span>
							<span class="meta-item">
								<i class="el-icon-office-building"></i>
								{{ selectedPatient.address }}
							</span>
						</div>
					</div>
					<div class="patient-stats">
						<div class="stat-item">
							<div class="stat-value">{{ drugPrescriptions.length }}</div>
							<div class="stat-label">药品处方</div>
						</div>
						<div class="stat-item">
							<div class="stat-value">{{ examPrescriptions.length }}</div>
							<div class="stat-label">检查处方</div>
						</div>
						<div class="stat-item">
							<div class="stat-value">{{ totalVisits }}</div>
							<div class="stat-label">就诊次数</div>
						</div>
					</div>
				</div>
			</el-card>
		</div>

		<!-- 处方列表 -->
		<div v-if="selectedPatient" class="prescription-list">
			<!-- 药品处方 -->
			<el-card class="prescription-card">
				<template #header>
					<div class="prescription-header">
						<span class="header-title">
							<i class="el-icon-medal prescription-icon drug"></i>
							药品处方记录
						</span>
						<el-tag type="success" size="small">
							共 {{ drugPrescriptions.length }} 条
						</el-tag>
					</div>
				</template>

				<div v-if="drugPrescriptions.length > 0">
					<div v-for="item in drugPrescriptions" :key="item.orderId" class="prescription-item">
						<div class="item-header">
							<span class="visit-id">就诊号: {{ item.visitId }}</span>
							<el-tag :type="getStatusType(item.orderStatus)" size="small">
								{{ getStatusText(item.orderStatus) }}
							</el-tag>
						</div>
						<div class="item-content">
							<div class="drug-info">
								<div class="drug-name">{{ item.orderContent }}</div>
								<div class="drug-spec">{{ item.drugSpec }}</div>
							</div>
							<div class="usage-info">
								<div class="usage-item">
									<span class="label">用法用量:</span>
									<span>{{ item.dosage }}{{ item.dosageUnit }}，{{ item.frequency }}</span>
								</div>
								<div class="usage-item">
									<span class="label">给药途径:</span>
									<span>{{ item.administrationRoute }}</span>
								</div>
								<div class="usage-item">
									<span class="label">用药时间:</span>
									<span>{{ formatDate(item.startTime) }} 至 {{ formatDate(item.endTime) }}</span>
								</div>
							</div>
						</div>
						<div class="item-footer">
							<span class="doctor">开具医生: {{ item.doctorName || '未知医生' }}</span>
							<span class="time">开具时间: {{ formatTime(item.createdTime) }}</span>
						</div>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="el-icon-box"></i>
					<p>暂无药品处方记录</p>
				</div>
			</el-card>

			<!-- 检查处方 -->
			<el-card class="prescription-card">
				<template #header>
					<div class="prescription-header">
						<span class="header-title">
							<i class="el-icon-document prescription-icon exam"></i>
							检查处方记录
						</span>
						<el-tag type="warning" size="small">
							共 {{ examPrescriptions.length }} 条
						</el-tag>
					</div>
				</template>

				<div v-if="examPrescriptions.length > 0">
					<div v-for="item in examPrescriptions" :key="item.orderId" class="prescription-item">
						<div class="item-header">
							<span class="visit-id">就诊号: {{ item.visitId }}</span>
							<el-tag :type="getStatusType(item.orderStatus)" size="small">
								{{ getStatusText(item.orderStatus) }}
							</el-tag>
						</div>
						<div class="item-content">
							<div class="exam-info">
								<div class="exam-name">{{ item.orderContent }}</div>
								<div class="exam-time">
									<span class="label">检查时间:</span>
									<span>{{ formatDate(item.startTime) }}</span>
								</div>
							</div>
							<div class="exam-status">
								<div class="status-item">
									<span class="label">执行状态:</span>
									<span>{{ getStatusText(item.orderStatus) }}</span>
								</div>
								<div class="status-item">
									<span class="label">紧急程度:</span>
									<span>{{ item.frequency }}</span>
								</div>
							</div>
						</div>
						<div class="item-footer">
							<span class="doctor">开具医生: {{ item.doctorName || '未知医生' }}</span>
							<span class="time">开具时间: {{ formatTime(item.createdTime) }}</span>
						</div>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="el-icon-box"></i>
					<p>暂无检查处方记录</p>
				</div>
			</el-card>
		</div>

		<!-- 开具处方对话框 -->
		<el-drawer title="开具处方" :visible.sync="prescribeDialogVisible" @close="resetPrescribeForm"
			:close-on-click-modal="false">
			<el-form :model="prescribeForm" :rules="prescribeRules" ref="prescribeFormRef" label-width="100px">
				<el-form-item label="处方类型" prop="orderType">
					<el-radio-group v-model="prescribeForm.orderType" @change="onOrderTypeChange">
						<el-radio label="drug">药品处方</el-radio>
						<el-radio label="exam">检查处方</el-radio>
					</el-radio-group>
				</el-form-item>

				<!-- 药品处方字段 -->
				<template v-if="prescribeForm.orderType === 'drug'">
					<el-form-item label="诊疗号" prop="visitId">
						<el-select v-model="prescribeForm.visitId" placeholder="请选择诊疗号" style="width: 100%" filterable>
							<el-option v-for="visit in visitList" :key="visit.visitId" :label="visit.visitId"
								:value="visit.visitId">
								<span>{{ visit.visitId }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">
									{{ formatVisitDate(visit.admissionTime) }}
								</span>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="药品名称" prop="orderContent">
						<el-select v-model="prescribeForm.orderContent" placeholder="请选择药品" style="width: 100%"
							@change="onDrugSelect" filterable>
							<el-option v-for="drug in drugList" :key="drug.drugCode" :label="drug.drugName"
								:value="drug.drugName">
								<span>{{ drug.drugName }}</span>
								<span style="float: right; color: #8492a6; font-size: 13px">{{ drug.drugSpec }}</span>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="药品编码" prop="drugCode">
						<el-input v-model="prescribeForm.drugCode" placeholder="药品编码" readonly />
					</el-form-item>

					<el-form-item label="药品规格" prop="drugSpec">
						<el-input v-model="prescribeForm.drugSpec" placeholder="药品规格" readonly />
					</el-form-item>

					<el-form-item label="单位" prop="drugUnit">
						<el-input v-model="prescribeForm.drugUnit" placeholder="单位" readonly />
					</el-form-item>

					<el-form-item label="剂型" prop="drugForm">
						<el-input v-model="prescribeForm.drugForm" placeholder="剂型" readonly />
					</el-form-item>

					<el-form-item label="用法用量" required>
						<el-col :span="11">
							<el-form-item prop="dosage">
								<el-input v-model="prescribeForm.dosage" placeholder="用量" />
							</el-form-item>
						</el-col>
						<el-col :span="2" class="text-center">-</el-col>
						<el-col :span="11">
							<el-form-item prop="drugUnit">
								<el-input v-model="prescribeForm.drugUnit" placeholder="单位" readonly />
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-form-item label="给药途径" prop="administrationRoute">
						<el-select v-model="prescribeForm.administrationRoute" placeholder="请选择给药途径"
							style="width: 100%">
							<el-option label="口服" value="口服" />
							<el-option label="静脉注射" value="静脉注射" />
							<el-option label="肌肉注射" value="肌肉注射" />
							<el-option label="皮下注射" value="皮下注射" />
							<el-option label="外用" value="外用" />
							<el-option label="吸入" value="吸入" />
						</el-select>
					</el-form-item>

					<el-form-item label="使用频次" prop="frequency">
						<el-select v-model="prescribeForm.frequency" placeholder="请选择使用频次" style="width: 100%">
							<el-option label="每日一次" value="每日一次" />
							<el-option label="每日两次" value="每日两次" />
							<el-option label="每日三次" value="每日三次" />
							<el-option label="每日四次" value="每日四次" />
							<el-option label="每6小时一次" value="每6小时一次" />
							<el-option label="每8小时一次" value="每8小时一次" />
							<el-option label="每12小时一次" value="每12小时一次" />
							<el-option label="睡前服用" value="睡前服用" />
							<el-option label="必要时服用" value="必要时服用" />
						</el-select>
					</el-form-item>

					<el-form-item label="用药时间" required>
						<el-col :span="11">
							<el-form-item prop="startTime">
								<el-date-picker v-model="prescribeForm.startTime" type="datetime" placeholder="开始时间"
									value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
							</el-form-item>
						</el-col>
						<el-col :span="2" class="text-center">至</el-col>
						<el-col :span="11">
							<el-form-item prop="endTime">
								<el-date-picker v-model="prescribeForm.endTime" type="datetime" placeholder="结束时间"
									value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
							</el-form-item>
						</el-col>
					</el-form-item>
				</template>

				<!-- 检查处方字段 -->
				<template v-if="prescribeForm.orderType === 'exam'">
					<el-form-item label="诊疗号" prop="visitId">
						<el-select v-model="prescribeForm.visitId" placeholder="请选择诊疗号" style="width: 100%" filterable>
							<el-option v-for="visit in visitList" :key="visit.visitId" :label="visit.visitId"
								:value="visit.visitId">
								<span>{{ visit.visitId }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">
									{{ formatVisitDate(visit.admissionTime) }}
								</span>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="检查项目" prop="orderContent">
						<el-input v-model="prescribeForm.orderContent" placeholder="请输入检查项目名称" />
					</el-form-item>

					<el-form-item label="检查时间" prop="startTime">
						<el-date-picker v-model="prescribeForm.startTime" type="datetime" placeholder="选择检查时间"
							value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
					</el-form-item>

					<el-form-item label="紧急程度" prop="frequency">
						<el-select v-model="prescribeForm.frequency" placeholder="请选择紧急程度" style="width: 100%">
							<el-option label="立即" value="立即" />
							<el-option label="紧急" value="紧急" />
							<el-option label="常规" value="常规" />
						</el-select>
					</el-form-item>
				</template>
			</el-form>

			<template>
				<span class="dialog-footer">
					<el-button @click="prescribeDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitPrescription" :loading="prescribing">
						开具处方
					</el-button>
				</span>
			</template>
		</el-drawer>
	</div>
</template>

<script>
	import http from '../../utils/request.js'

	export default {
		name: 'PrescriptionManagement',
		data() {
			return {
				// 搜索相关
				patientSearch: '',
				searching: false,
				selectedPatient: null,

				// 处方列表
				prescriptionList: [],


				// 开具处方相关
				prescribeDialogVisible: false,
				prescribing: false,
				prescribeForm: {
					orderType: 'drug',
					orderContent: '',
					drugCode: '',
					drugSpec: '',
					dosage: '',
					dosageUnit: '',
					frequency: '',
					administrationRoute: '',
					startTime: '',
					endTime: ''
				},
				prescribeRules: {
					orderType: [{
						required: true,
						message: '请选择处方类型',
						trigger: 'change'
					}],
					orderContent: [{
						required: true,
						message: '请输入处方内容',
						trigger: 'blur'
					}],
					startTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'change'
					}],
					frequency: [{
						required: true,
						message: '请输入使用频次',
						trigger: 'blur'
					}],
					// 药品相关验证规则
					drugCode: [{
						required: false,
						message: '请输入药品编码',
						trigger: 'blur'
					}],
					dosage: [{
						required: false,
						message: '请输入用量',
						trigger: 'blur'
					}],
					dosageUnit: [{
						required: false,
						message: '请输入单位',
						trigger: 'blur'
					}],
					administrationRoute: [{
						required: false,
						message: '请选择给药途径',
						trigger: 'change'
					}],
					endTime: [{
						required: false,
						message: '请选择结束时间',
						trigger: 'change'
					}],
				},
				drugList: [],
				visitList: [],
			}
		},
		async created() {
			const resp = await http.get('/doctor/getDrugList');
			this.drugList = resp.data.data;
		},
		computed: {
			// 药品处方列表
			drugPrescriptions() {
				return this.prescriptionList.filter(item => item.orderType === 'drug')
			},

			// 检查处方列表
			examPrescriptions() {
				return this.prescriptionList.filter(item => item.orderType === 'exam')
			},

			// 就诊次数
			totalVisits() {
				const visitIds = new Set(this.prescriptionList.map(item => item.visitId))
				return visitIds.size
			}
		},

		methods: {
			formatVisitDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				// 返回格式如 "2024-01-20"
				return date.toISOString().split('T')[0];
			},
			onDrugSelect(selectedDrugName) {
				// 根据选择的药品名称找到对应的药品信息
				const selectedDrug = this.drugList.find(drug => drug.drugName === selectedDrugName);
				if (selectedDrug) {
					// 自动填充药品相关信息
					this.prescribeForm.drugCode = selectedDrug.drugCode;
					this.prescribeForm.drugSpec = selectedDrug.drugSpec;
					this.prescribeForm.drugUnit = selectedDrug.drugUnit;
					this.prescribeForm.drugForm = selectedDrug.drugForm;
				}
			},
			// 搜索患者
			async searchPatient() {
				if (!this.patientSearch.trim()) {
					this.$message.warning('请输入患者编号')
					return
				}

				this.searching = true
				try {
					// 1. 先查询患者信息
					const patientResp = await http.get('/doctor/getPatientInfo', {
						headers: {
							patientId: this.patientSearch.trim(),

						}
					})
					const visitResp = await http.get('/doctor/getVisitList', {
						headers: {
							patientId: this.patientSearch.trim(),
							doctorId: this.$store.state.user.id
						}
					})
					console.log('患者查询结果:', patientResp.data)

					this.visitList = visitResp.data.data;
					if (patientResp.data.code === 1 && patientResp.data.data) {
						this.selectedPatient = patientResp.data.data

						// 2. 查询患者的处方列表
						await this.getPrescriptionList()

						this.$message.success('查询成功')
					} else {
						this.$message.error('未找到患者信息')
						this.selectedPatient = null
						this.prescriptionList = []
					}
				} catch (error) {
					console.error('查询失败:', error)
					this.$message.error('查询失败，请稍后重试')
				} finally {
					this.searching = false
				}
			},

			// 获取处方列表
			async getPrescriptionList() {
				if (!this.selectedPatient) return

				try {
					const resp = await http.get('/doctor/getPrescriptionList', {
						headers: {
							patientId: this.patientSearch.trim()
						}
					})

					console.log('处方列表结果:', resp.data)

					if (resp.data.code === 1) {
						this.prescriptionList = resp.data.data || []
					}
				} catch (error) {
					console.error('获取处方列表失败:', error)
					this.$message.error('获取处方列表失败')
				}
			},

			// 显示开具处方对话框
			showPrescribeDialog() {
				console.log('显示开具处方对话框')
				this.prescribeDialogVisible = true
				// 重置表单
				this.$nextTick(() => {
					this.resetPrescribeForm()
				})
			},

			// 处方类型变化
			onOrderTypeChange(val) {
				console.log('处方类型变化:', val)
				// 清除验证
				if (this.$refs.prescribeFormRef) {
					this.$refs.prescribeFormRef.clearValidate()
				}
			},

			// 提交处方
			async submitPrescription() {
				console.log('开始提交处方')

				// 验证表单
				try {
					await this.$refs.prescribeFormRef.validate()
				} catch (error) {
					console.log('表单验证失败:', error)
					this.$message.error('请填写完整的处方信息')
					return
				}

				this.prescribing = true

				try {
					// 获取当前医生信息
					const doctorInfo = JSON.parse(localStorage.getItem('doctorInfo') || '{}')
					const currentDoctorId = doctorInfo.id || 2

					// 构建处方数据
					const formData = {
						...this.prescribeForm,
						patientId: this.selectedPatient.patientId,
						visitId: this.prescribeForm.visitId,
						orderingDoctorId: currentDoctorId,
						orderStatus: 'pending',
						createdTime: this.getCurrentTime()
					}
					formData.dosageUnit = this.prescribeForm.drugUnit
					// 如果是检查处方，不需要药品相关字段
					if (formData.orderType === 'exam') {
						formData.drugCode = null
						formData.drugSpec = null
						formData.dosage = null
						formData.dosageUnit = null
						formData.administrationRoute = null
						formData.endTime = null
					}

					console.log('提交的处方数据:', formData)

					const resp = await http.post('/doctor/createPrescription', formData)
					console.log('处方创建响应:', resp.data)

					if (resp.data.code === 1) {
						this.$message.success('处方开具成功')
						this.prescribeDialogVisible = false
						await this.getPrescriptionList() // 刷新列表
					} else {
						this.$message.error(resp.data.msg || '处方开具失败')
					}
				} catch (error) {
					console.error('提交处方失败:', error)
					this.$message.error('处方开具失败，请稍后重试')
				} finally {
					this.prescribing = false
				}
			},

			// 重置表单
			resetPrescribeForm() {
				console.log('重置表单')
				this.prescribeForm = {
					orderType: 'drug',
					orderContent: '',
					drugCode: '',
					drugSpec: '',
					dosage: '',
					dosageUnit: '',
					frequency: '',
					administrationRoute: '',
					startTime: '',
					endTime: ''
				}

				// 清除验证状态
				if (this.$refs.prescribeFormRef) {
					this.$refs.prescribeFormRef.clearValidate()
				}
			},

			// 获取当前时间
			getCurrentTime() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				const hours = String(now.getHours()).padStart(2, '0')
				const minutes = String(now.getMinutes()).padStart(2, '0')
				const seconds = String(now.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},

			// 获取状态对应的标签类型
			getStatusType(status) {
				const map = {
					'pending': 'info',
					'verified': 'success',
					'executing': 'warning',
					'completed': '',
					'cancelled': 'danger'
				}
				return map[status] || 'info'
			},

			// 获取状态文本
			getStatusText(status) {
				const map = {
					'pending': '待审核',
					'verified': '已审核',
					'executing': '执行中',
					'completed': '已完成',
					'cancelled': '已取消'
				}
				return map[status] || status
			},

			// 格式化日期
			formatDate(date) {
				if (!date) return '-'
				try {
					const d = new Date(date)
					if (isNaN(d.getTime())) return date
					const year = d.getFullYear()
					const month = String(d.getMonth() + 1).padStart(2, '0')
					const day = String(d.getDate()).padStart(2, '0')
					return `${year}-${month}-${day}`
				} catch (e) {
					return date
				}
			},

			// 格式化时间
			formatTime(date) {
				if (!date) return '-'
				try {
					const d = new Date(date)
					if (isNaN(d.getTime())) return date
					const year = d.getFullYear()
					const month = String(d.getMonth() + 1).padStart(2, '0')
					const day = String(d.getDate()).padStart(2, '0')
					const hours = String(d.getHours()).padStart(2, '0')
					const minutes = String(d.getMinutes()).padStart(2, '0')
					return `${year}-${month}-${day} ${hours}:${minutes}`
				} catch (e) {
					return date
				}
			}
		}
	}
</script>

<style scoped>
	.prescription-container {
		padding: 20px;
		max-width: 1200px;
		margin: 0 auto;
	}

	/* 搜索区域 */
	.search-section {
		margin-bottom: 20px;
	}

	.search-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.search-form {
		display: flex;
		gap: 10px;
	}

	.search-input {
		flex: 1;
	}

	/* 患者信息 */
	.patient-info-section {
		margin-bottom: 20px;
	}

	.patient-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.patient-basic {
		flex: 1;
	}

	.patient-name {
		font-size: 24px;
		font-weight: bold;
		color: #303133;
		margin-bottom: 8px;
	}

	.patient-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		color: #606266;
	}

	.meta-item {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.meta-item i {
		color: #409EFF;
	}

	.patient-stats {
		display: flex;
		gap: 30px;
	}

	.stat-item {
		text-align: center;
	}

	.stat-value {
		font-size: 24px;
		font-weight: bold;
		color: #409EFF;
	}

	.stat-label {
		font-size: 14px;
		color: #909399;
		margin-top: 4px;
	}

	/* 处方列表 */
	.prescription-list {
		display: grid;
		gap: 20px;
	}

	.prescription-card {
		margin-bottom: 20px;
	}

	.prescription-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: bold;
		font-size: 16px;
	}

	.prescription-icon {
		font-size: 18px;
	}

	.prescription-icon.drug {
		color: #67C23A;
	}

	.prescription-icon.exam {
		color: #E6A23C;
	}

	/* 处方项 */
	.prescription-item {
		border: 1px solid #ebeef5;
		border-radius: 4px;
		padding: 16px;
		margin-bottom: 12px;
		transition: all 0.3s;
	}

	.prescription-item:hover {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
		padding-bottom: 8px;
		border-bottom: 1px solid #f0f0f0;
	}

	.visit-id {
		color: #606266;
		font-size: 14px;
	}

	.item-content {
		margin-bottom: 12px;
	}

	.drug-info,
	.exam-info {
		margin-bottom: 8px;
	}

	.drug-name {
		font-weight: bold;
		color: #303133;
		margin-bottom: 4px;
	}

	.drug-spec {
		color: #909399;
		font-size: 14px;
	}

	.exam-name {
		font-weight: bold;
		color: #303133;
		margin-bottom: 8px;
	}

	.usage-info,
	.exam-status {
		display: grid;
		gap: 4px;
	}

	.usage-item,
	.status-item {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
	}

	.usage-item .label,
	.status-item .label {
		color: #909399;
		min-width: 60px;
	}

	.item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 8px;
		border-top: 1px solid #f0f0f0;
		color: #909399;
		font-size: 14px;
	}

	.doctor,
	.time {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 40px 0;
		color: #909399;
	}

	.empty-state i {
		font-size: 48px;
		margin-bottom: 16px;
		opacity: 0.5;
	}

	/* 对话框样式 */
	.text-center {
		text-align: center;
	}
</style>